<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Progress component - UIkit tests</title>
        <script src="../../vendor/jquery.js"></script>
        <script src="_test.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Progress</h1>

            <div class="uk-progress">
                <div class="uk-progress-bar" style="width: 40%;"></div>
            </div>

            <div class="uk-progress">
                <div class="uk-progress-bar" style="width: 45%;">45%</div>
            </div>

            <h2>Sizes</h2>

            <div class="uk-progress uk-progress-mini">
                <div class="uk-progress-bar" style="width: 50%;"></div>
            </div>

            <div class="uk-progress uk-progress-small">
                <div class="uk-progress-bar" style="width: 55%;"></div>
            </div>

            <div class="uk-progress">
                <div class="uk-progress-bar" style="width: 60%;"></div>
            </div>

            <h2>Colors</h2>

            <div class="uk-progress uk-progress-success uk-progress-mini">
                <div class="uk-progress-bar" style="width: 50%;"></div>
            </div>

            <div class="uk-progress uk-progress-success uk-progress-small">
                <div class="uk-progress-bar" style="width: 55%;"></div>
            </div>

            <div class="uk-progress uk-progress-success">
                <div class="uk-progress-bar" style="width: 65%;"></div>
            </div>

            <div class="uk-progress uk-progress-warning uk-progress-mini">
                <div class="uk-progress-bar" style="width: 50%;"></div>
            </div>

            <div class="uk-progress uk-progress-warning uk-progress-small">
                <div class="uk-progress-bar" style="width: 55%;"></div>
            </div>

            <div class="uk-progress uk-progress-warning">
                <div class="uk-progress-bar" style="width: 65%;"></div>
            </div>

            <div class="uk-progress uk-progress-danger uk-progress-mini">
                <div class="uk-progress-bar" style="width: 50%;"></div>
            </div>

            <div class="uk-progress uk-progress-danger uk-progress-small">
                <div class="uk-progress-bar" style="width: 55%;"></div>
            </div>

            <div class="uk-progress uk-progress-danger">
                <div class="uk-progress-bar" style="width: 65%;"></div>
            </div>

            <h2>Striped</h2>

            <div class="uk-progress uk-progress-striped uk-active">
                <div class="uk-progress-bar" style="width: 65%;"></div>
            </div>

        </div>

    </body>
</html>